<template>
    <div class="situation-content">
        <div class="title">
            <h3>停车场态势<span>Parking situation</span></h3>
        </div>
        <div id="myChart" class="mychart"></div>
        <div class="state-content">
            <div class="small-title">
                <h3>车辆道闸设备状态</h3>
            </div>
            <div class="state">
                <div class="left-content">
                    <div class="num num-left">
                        <div>
                            <p>10</p>
                        </div>
                    </div>
                    <p class="state-on">在线</p>
                </div>
                <div class="right-content">
                    <div class="num num-right">
                        <div>
                            <p>10</p>
                        </div>
                    </div>
                    <p class="state-off">离线</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'situation',
    data() {
        return {
            rdata: [140, 190, 200, 185, 250, 300], //驶入
            cdata: [270, 210, 310, 210, 170, 150], //驶出
        }
    },
    methods: {
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    //图例组件
                    data: [
                        {
                            name: '驶入',
                        },
                        {
                            name: '驶出',
                        },
                    ],
                    textStyle: {
                        color: '#fff',
                        fontSize: '12',
                    },
                    right: '5',
                    padding: [15, 0],
                },
                calculable: true,
                xAxis: [
                    {
                        name: '辆/小时',
                        nameLocation: 'end',
                        nameTextStyle: {
                            //---坐标轴名称样式
                            fontSize: 7,
                            color: '#fff',
                            padding: [5, 0, 0, -5], //---坐标轴名称相对位置
                        },
                        type: 'category',
                        data: ['2H', '4H', '6H', '8H', '10H', '12H'],
                        axisLabel: {
                            color: '#fff',
                            margin: 10,
                            fontSize: 12,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        data: ['0', '50', '100', '150', '200', '250', '300', '350', '400'],
                        axisLabel: {
                            color: '#fff',
                            fontSize: 12,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        splitLine: {
                            //---grid 区域中的分隔线
                            show: true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
                            lineStyle: {
                                color: 'rgba(255,255,255,0.2)',
                                width: 1,
                                type: 'dashed', //---类型
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '驶入',
                        type: 'bar',
                        barWidth: '10',
                        itemStyle: {
                            normal: {
                                //柱形图圆角，初始化效果
                                // barBorderRadius: [15, 15, 0, 0],
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#c280ff', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#e7eaf1', // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                            },
                        },
                        data: this.rdata,
                        // markPoint: {
                        //     data: [
                        //         { type: 'max', name: '最大值' },
                        //         { type: 'min', name: '最小值' },
                        //     ],
                        // },
                    },
                    {
                        name: '驶出',
                        type: 'bar',
                        barWidth: '10',
                        itemStyle: {
                            normal: {
                                //柱形图圆角，初始化效果
                                // barBorderRadius: [15, 15, 0, 0],
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#80ffff', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#e7eaf1', // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                            },
                        },
                        data: this.cdata,
                    },
                ],
            })
            setTimeout(function () {
                window.onresize = function () {
                    myChart.resize()
                }
            }, 200)
        },
    },
    mounted() {
        this.drawLine()
    },
}
</script>

<style lang="less" scoped>
@import '../../../assets/less/school.less';
.situation-content {
    width: 350px;
    padding-left: 15px;
    .mychart {
        width: 100%;
        height: 300px;
    }
    .state-content {
        .state {
            margin: 25px 0;
            display: flex;
            justify-content: space-evenly;
            .left-content,
            .right-content {
                width: 100px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                .num {
                    width: 100px;
                    height: 60px;
                    margin-top: 30px;
                    border-radius: 10px 10px 55px 55px;
                    position: relative;
                    background-image: linear-gradient(to bottom, rgb(104, 81, 159), rgb(127, 245, 250));
                    div {
                        position: absolute;
                        bottom: 10px;
                        left: 10px;
                        width: 80px;
                        height: 80px;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        border-radius: 50%;
                        background-image: radial-gradient(rgb(7, 9, 13), rgb(135, 168, 252));
                        border: 7px solid rgb(55, 79, 126);
                        p {
                            margin: 5px 0;
                            color: #00ffff;
                            font-size: 16px;
                            font-weight: 600;
                        }
                    }
                }
                .state-on,
                .state-off {
                    color: #fff;
                    margin-top: 10px;
                    font-size: 16px;
                }
                .num-right {
                    background-image: linear-gradient(to top, rgb(104, 81, 159), rgb(127, 245, 250));
                }
            }
        }
    }
}
</style>